<template>
    <div class="container-fluid ">
        <TopBar></TopBar>
        <div class="box-bg">
            <div class="article-body">
                <!-- 左边导航 -->
                <div class="left-box">
                    <br>
                    <br>
                    <div class="left-title">{{$t('articlePage.other')}}</div>
                    <br>
                    <div class="left-dirct">
                        <TransitionGroup name="other_list" tag="div">
                            <div v-for="article in articleStore.articleTitlesList" :key="article.article_id">
                                <div @click="goArticleDetails(article.article_id)">
                                    <p class="h6">{{ article.title }}</p>
                                </div>

                            </div>
                        </TransitionGroup>

                    </div>


                </div>

             
                <!-- 中间内容 -->
                <div class="center-box">

                    <div>
                        <p class="h1">{{ articleStore.article_now.title }}</p>
                    </div>

                    <div class="author-details">
                        <p class="badge text-bg-primary tags-box"> {{$t('articlePage.tags')}}{{ articleStore.article_now.tags }} </p>

                        <div @click="showUser(articleStore.article_now.article_id)">
                            <p class="badge text-bg-light">
                                {{$t('articlePage.author')}}{{ articleStore.article_now.username }}
                            </p>
                        </div>

                        <p class="badge text-bg-light tags-box">{{$t('articlePage.create')}}{{ articleStore.article_now.create_time }}</p>
                    </div>
                    <!-- 内容 -->
                    <div class="content-box">
                        <MdPreviewBox :body="articleStore.article_now.body"></MdPreviewBox>
                    </div>


                </div>

                <!-- 右边导航 -->
                <div class="right-box">
                    <br>
                    <br>
                    <div class="right-title ">{{$t('articlePage.catalogs')}}</div>
                    <br>
                    <div class="right-dirct">
                        <TransitionGroup name="dir_list" tag="div">
                            <div v-for="catalog in articleStore.articleCatalogs" :key="new Date().getDate.toString">
                                <div @click="go(catalog.text)">
                                    <p :style="{
                                        marginLeft: catalog.level * 2 + 'px',
                                        fontSize: (20 - catalog.level) + 'px',
                                        color: getColorForLevel(catalog.level)
                                    }">{{ catalog.text }}</p>
                                </div>

                            </div>
                        </TransitionGroup>
                    </div>
                </div>

            </div>
            <br>
            <br>
            <br>
     <div class="comments-box">
            <!-- 底部发言框 -->
            <div class="input-box">
                <p>{{ commentStore.commentList.page_all_num }}条评论</p>
                <input v-model="commentStore.pullComment.content" class="form-control me-2" style="border-radius: 20px;"
                    placeholder="评论此文章！！！<---至少5个字">
                <button class="btn btn-primary" style="width:150px" @click="pullComment()" type="submit">
                    发布
                </button>
            </div>


            <!-- 评论区 -->
            <div class="comment-box">
                <!-- 整体评论 -->
                <div v-for="comment in  mainCommentList" :key="comment.comment_id">
                    <!-- 主评论 -->
                    <div>
                        <CommentItem :comment=comment></CommentItem>
                    </div>
                </div>
            </div>

        </div>  
        </div>
        <br><br><br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted,watch } from "vue"
import { ArticleStore } from '../store/articelStore/index'
import { UserStore } from '../store/userStore/index'
import { CommentsStore } from '../store/commentStore/index'
import toast from '@/components/Toast/index'
import { useRouter } from 'vue-router'
import { AuthStore } from "@/store/authStore"
const router = useRouter()

const articleStore = ArticleStore()
const userStore = UserStore()
const commentStore = CommentsStore()
const mainCommentList:any = ref()
const authStore = AuthStore()
//文章详情页面
function goArticleDetails(article_id: string) {
   
    //跳转,传递文章id
    if (article_id === "" || article_id === null) {
        toast.showToast({ msg: "获取文章失败！！！请看其他文章", type: "error", mask: false })
        return
    }
    //更新存储
    articleStore.getArticleBody(article_id)
    commentStore.getCommentListData(article_id)
}

//目录颜色
function getColorForLevel(level: number) {
    switch (level) {
        case 1:
            return 'rgb(255, 255, 0)';
        case 2:
            return 'rgb(255, 165, 0)';

        default:
            return 'rgb(255, 255, 255)'; // 默认颜色，白色
    }
}
//目录滚动
function go(id: string) {
    try {
        const ele = document.querySelector("#" + id)
        if (ele) {
            ele.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'start'
            });
           
        }
    }
    catch (error) {
        console.log("跳转失败")
    }
}

//上传评论
function pullComment() {
    if( !authStore.loginStatus ){
        toast.showToast({msg:"登陆可评论",type:"warning"})
        return
    }
    if(   commentStore.pullComment.content.length<5  ){
        toast.showToast({msg:"都说了最少5个字",type:"warning"})
        return
    }

    commentStore.pullComment.article_id = articleStore.article_now.article_id
    commentStore.pullComment.comment_id = ""
    commentStore.pullComment.isMain = "1"
    commentStore.pullCommentData()
    commentStore.getCommentListData(articleStore.article_now.article_id)
    commentStore.pullComment = {
        article_id: "",
        comment_id: "",
        content: "",
        isMain: "1"
    }
}
//获取用户简介
function showUser(article_id: string) {
    try {
        //检测是否存在用户名
        if (articleStore.article_now.username === "" || articleStore.article_now.username === null) {
            toast.showToast({ msg: "用户不存在！！！", type: "error" })
            return
        }
        //获取文章作者信息
        userStore.getUserContact({ "article_id": article_id })
        router.push({ path: 'author' })
    }
    catch (error) {
        toast.showToast({ msg: "用户信息获取失败！！！", type: "error" })
        return
    }

}

//获取文章内容
 function getBody() {
  
     articleStore.getArticleBody(articleStore.article_now.article_id)
     commentStore.getCommentListData(articleStore.article_now.article_id)
    //获取相关问标题
    if(articleStore.article_now.type === undefined || articleStore.article_now.tags===undefined){
            return
    }
     articleStore.getTitleByType({
        "type": articleStore.article_now.type,
        "tags": articleStore.article_now.tags
    })
}

watch(commentStore.commentList.list,()=>{
    mainCommentList.value = commentStore.commentList.list
})

//语法糖created钩子，直接调用
getBody();
onMounted(() => {
    mainCommentList.value = commentStore.commentList.list

});

</script>
<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {
    .right-box {
        display: none;
    }
    .left-box{
        display: none;
    }
    .comments-box{
        display: none;
    }
    .tags-box{
        display: none;
    }
    .center-box {
        min-width: 100%;
    }

    
  }

.container-fluid {
    background-color: $passlink-bg-color;
    min-height: 1000px;
    width: 100%;
    .box-bg {
        padding-top: 20px;
        width: 100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .article-body {
            word-wrap: break-word;
            display: flex;
            width: 100%;
          
            justify-content: space-between;
            .left-box {
                width: 150px;
                color: $passlink-font-color-white;
                padding: 5px;
                min-height: 400px;

                .left-title {
                    color: $passlink-font-color-white;
                    font-size: $passlink-font-size18;
                    font-weight: bold;
                    text-align: center;
                    height: 30px;
                    border-bottom: 1px solid $passlink-font-color-white;
                }

                .left-dirct {
                    overflow: auto;
                    height: 600px;
                    width: 100%;
                    font-size: $passlink-font-size14;
                    font-weight: lighter;

                    p {
                        color: $passlink-font-color-white;
                        text-decoration: underline;
                    }

                    p:hover {
                        color: $passlink-font-color-yellow;
                    }

                    .other_list-move,
                    /* 对移动中的元素应用的过渡 */
                    .other_list-enter-active,
                    .other_list-leave-active {
                        transition: all 0.5s ease;
                    }

                    .other_list-enter-from,
                    .other_list-leave-to {
                        opacity: 0;
                        transform: translateX(30px);
                    }

                    /* 确保将离开的元素从布局流中删除
          以便能够正确地计算移动的动画。 */
                    .other_list-leave-active {
                        position: absolute;
                    }
                }

            }

            .right-box {
                padding: 5px;
                width: 150px;
                min-height: 400px;
                color: $passlink-font-color-white;

                .right-title {

                    font-size: $passlink-font-size18;
                    font-weight: bold;
                    text-align: center;
                    height: 30px;
                    border-bottom: 1px solid $passlink-font-color-white;
                }

                .right-dirct {
                    overflow: auto;
                    height: 600px;
                    width: 100%;
                    font-size: $passlink-font-size14;
                    font-weight: lighter;

                    .dir_list-move,
                    /* 对移动中的元素应用的过渡 */
                    .dir_list-enter-active,
                    .dir_list-leave-active {
                        transition: all 0.5s ease;
                    }

                    .dir_list-enter-from,
                    .dir_list-leave-to {
                        opacity: 0;
                        transform: translateX(30px);
                    }

                    /* 确保将离开的元素从布局流中删除
          以便能够正确地计算移动的动画。 */
                    .dir_list-leave-active {
                        position: absolute;
                    }
                }


            }

            .center-box {
                padding-inline: 2px;
                width: 100%;
                color: $passlink-font-color-white;
                max-width: 80%;
               
                .author-details {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    p {
                        font-size: $passlink-font-size14;
                        font-weight: lighter;

                    }

                    p:hover {
                        color: aqua;
                    }
                }

                .content-box {
                    height:700px;
                    font-size: $passlink-font-size16;
                    width: auto;
                  
                    overflow: auto;
                }
            }
        }

        .input-box {
            color: $passlink-font-color-white;
            font-weight: lighter;
            font-size: $passlink-font-size16;
            width: 100%;
            height: 40px;
            display: flex;

            p {
                text-align: center;
                margin: auto;
                width: 200px;
            }

        }

        .comment-box {
            width: 800px;
            margin: auto;

            .comment-right {

                margin-left: 10%;
                width: 90%;

            }
        }

        .comment-box::after {
            content: "";
            display: table;
            clear: both;
        }


    }

}</style>
